<template>
  <view class="content">
    <van-nav-bar title="商品详情" left-text="" :left-arrow="true" placeholder fixed @click-left="onClickLeft" />
    <view
      class="detail"
      :style="{
        height: 'calc(100vh - 230rpx - ' + (safeAreaTop + safeAreaBot) + 'px)',
      }"
    >
      <view class="detail-info">
        <view class="shop-box" :style="{ width: info.vip_type === 2 ? 'calc(100% - 148rpx)' : '100%' }">
          <view class="shop-img">
            <zero-lazy-load
              class="img-box"
              :image="info.contact_head"
              loadingImg="https://images.tongzhuangkc.com/tz/default-good.png"
              errorImg="https://images.tongzhuangkc.com/tz/default-good.png"
              borderRadius="16"
            ></zero-lazy-load>
            <view class="img-icon" :class="info.vip_type === 1 ? 'vip' : info.vip_type === 2 ? 'active' : ''"></view>
          </view>
          <view class="info-box">
            <view class="title">{{ info.contact_name }}</view>
            <view class="info-tag">已加入{{ info.join_days }}天</view>
          </view>
        </view>
        <view class="info-btn" v-if="info.vip_type === 2" @click="goShop(info.member_id)">查看商铺 &nbsp;></view>
      </view>
      <view class="seize"></view>
      <view class="goods-info">
        <swiper class="swiper" circular :autoplay="true" :interval="2000" :duration="500">
          <swiper-item v-for="(item, index) in info.images" :key="index">
            <image class="img-box" :src="item" alt="" />
          </swiper-item>
        </swiper>
        <view class="info-des">{{ info.content }}</view>
        <view class="info-text">浏览量{{ info.view_num }}&nbsp;&nbsp;{{ info.area_show }}</view>
        <view class="info-text">{{ info.publish_time }}</view>
        <view class="tip">联系我时，请表明是在童装库存网看到的，谢谢！</view>
      </view>
      <view class="seize"></view>
      <view class="secure">
        <view class="secure-title">
          <text>安全交易提醒</text>
        </view>
        <view class="secure-box">
          1、此信息由货主自行发布，平台仅提供信息展示。<br />2、交易前，请和货主仔细确认交易货品的实际情况（例如：残次率、尺码情况、货品实拍图等）。<br />3、网络交易有风险，资金交易要谨慎！！</view
        >
      </view>
      <view class="seize"></view>
      <view class="shop-box">
        <view class="shop-list" v-for="item in shopList" :key="item.member_id" @click="goShop(item.member_id)">
          <view class="img-box">
            <zero-lazy-load
              :image="item.member_head"
              loadingImg="https://images.tongzhuangkc.com/tz/default-good.png"
              errorImg="https://images.tongzhuangkc.com/tz/default-good.png"
              borderRadius="16"
            ></zero-lazy-load>
          </view>

          <view class="shop-name">{{ item.member_name }}</view>
        </view>
      </view>
      <PosterPage :goodsInfo="goodsInfo"></PosterPage>
    </view>
    <view class="good-opt">
      <view class="good-icon">
        <view class="icon-list" @click="goPage">首页</view>
        <view class="icon-list" @tap="openReport">举报</view>
        <button open-type="share" class="icon-list">分享</button>
      </view>
      <view class="good-btn">
        <view class="btn-list" @click="copyHandle">添加微信</view>
        <view class="btn-list" @click="linkPhone">联系卖家</view>
      </view>
    </view>
    <van-overlay :show="wxShow" @click="wxShow = false">
      <view class="wx-sucess">
        <image class="img-box" src="https://images.tongzhuangkc.com/tz/finish.png" alt="" />
        <view class="wx-title">微信号复制成功</view>
        <view class="wx-des">添加好友请备注<text>库存网</text></view>
        <view class="wx-opt">我知道了</view>
      </view>
    </van-overlay>
    <van-overlay :show="reportShow">
      <view class="report-box">
        <uni-forms :modelValue="formData" :rules="rules" ref="uniForm">
          <uni-forms-item>
            <uni-data-checkbox v-model="formData.report_type" :localdata="reportType" />
          </uni-forms-item>
          <uni-forms-item name="content">
            <uni-easyinput type="textarea" v-model="formData.content" placeholder="填写举报内容"></uni-easyinput>
          </uni-forms-item>
        </uni-forms>
        <view class="report-opt">
          <view class="opt-btn" @click="reportShow = false">取消</view>
          <view class="opt-btn" @tap="submitHandle">确定</view>
        </view>
      </view>
    </van-overlay>
  </view>
</template>

<script>
import { reactive, toRefs, onMounted, ref } from 'vue'
import TitlePage from '@/components/title/index'
import PosterPage from '@/components/poster/index'
import { getDetail, getMemberContact, reportAjax } from '@/http/goods'
import { onLoad, onShareAppMessage } from '@dcloudio/uni-app'
import { getRecommendShopList } from '@/http/home'

export default {
  components: {
    TitlePage,
    PosterPage,
  },
  setup() {
    const uniForm = ref()
    const state = reactive({
      HeadNavHeight: 0,
      safeAreaTop: 0,
      safeAreaBot: 0,
      shopList: [],
      info: {},
      goods_id: '',
      memberInfo: {},
      wxShow: false,
      reportShow: false,
      formData: {
        goods_id: '',
        content: '',
        report_type: 1,
      },
      reportType: [
        {
          text: '非法信息',
          value: 1,
        },
        {
          text: '虚假信息',
          value: 2,
        },
        {
          text: '其它',
          value: 3,
        },
      ],
      rules: {
        content: {
          rules: [
            {
              required: true,
              errorMessage: '填写举报内容',
            },
          ],
        },
      },
      goodsInfo: {},
    })
    const getHeadHeight = (data) => {
      state.HeadNavHeight = 2 * data
    }
    const onClickLeft = () => {
      uni.navigateBack({
        delta: 1,
      })
    }
    const getDetailHandle = async () => {
      const { data } = await getDetail({
        goods_id: state.goods_id,
      })
      state.info = data
      getMember()
    }
    const getMember = async () => {
      const { data } = await getMemberContact({ goods_id: state.goods_id })
      state.memberInfo = data
    }
    const linkPhone = () => {
      uni.makePhoneCall({
        phoneNumber: state.memberInfo.mobile,
      })
    }
    const copyHandle = () => {
      uni.setClipboardData({
        data: state.memberInfo.wx_code,
        showToast: false,
        success: function () {
          state.wxShow = true
        },
      })
    }
    const goPage = () => {
      uni.switchTab({
        url: `/pages/home/index`,
      })
    }
    const openReport = () => {
      state.formData = {
        goods_id: '',
        content: '',
        report_type: 1,
      }
      uniForm.value.clearValidate()
      state.reportShow = true
    }
    const submitHandle = () => {
      uniForm.value
        .validate()
        .then(async () => {
          state.formData.goods_id = state.goods_id
          await reportAjax(state.formData)
          uni.showToast({
            title: '举报成功',
            icon: 'success',
          })
          state.reportShow = false
        })
        .catch((err) => {
          console.log('表单错误信息：', err)
        })
    }
    // 获取推荐商家
    const getRecommendShop = async () => {
      const { data } = await getRecommendShopList({
        size: 20,
      })
      state.shopList = data
    }
    // 跳转商铺详情
    const goShop = (id) => {
      uni.navigateTo({
        url: `/subpackage-goods/shop/index?id=${id}`,
      })
    }
    onShareAppMessage((res) => {
      return {
        title: state.info.contact_name,
        imageUrl: state.info.images[0],
        path: `/subpackage-goods/detail/index?id=${state.goods_id}`,
      }
    })
    onLoad((e) => {
      uni.showShareMenu({
        withShareTicket: true,
        menus: ['shareAppMessage', 'shareTimeline'],
      })
      if (e) {
        state.goods_id = e.id
        getDetailHandle()
        getRecommendShop()
      }
    })
    onMounted(() => {
      uni.getSystemInfo({
        success: function (res) {
          state.safeAreaTop = res.safeAreaInsets.top === 20 ? 0 : res.safeAreaInsets.top
          state.safeAreaBot = res.safeAreaInsets.bottom !== 0 ? res.safeAreaInsets.bottom : '20'
        },
      })
    })
    return {
      ...toRefs(state),
      getHeadHeight,
      onClickLeft,
      linkPhone,
      getMember,
      copyHandle,
      goPage,
      uniForm,
      submitHandle,
      openReport,
      goShop,
    }
  },
}
</script>

<style lang="scss">
.content {
  height: 100vh;
  background: #fff;
}
.detail {
  height: calc(100vh - 230rpx);
  overflow-y: auto;
}
.detail-info {
  padding: 24rpx;
  background: #fff;
  display: flex;
  justify-content: space-between;
  margin-bottom: 16rpx;
  .shop-box {
    display: flex;
    padding: 0;
    width: calc(100% - 138rpx);
    .shop-img {
      position: relative;
      width: 112rpx;
      height: 112rpx;
      .img-icon {
        width: 40rpx;
        height: 40rpx;
        position: absolute;
        bottom: 0;
        right: 0;
        &.vip {
          background: url('https://images.tongzhuangkc.com/tz/vip.png') no-repeat;
          background-size: 100% 100%;
        }
        &.active {
          background: url('https://images.tongzhuangkc.com/tz/vip2.png') no-repeat;
          background-size: 100% 100%;
        }
      }
      .img-box {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .info-box {
      margin-left: 16rpx;
      width: calc(100% - 148rpx);
      .title {
        font-size: 28rpx;
        font-weight: 500;
        color: #2b303b;
        @include text-ellipsis(2);
      }
      .info-tag {
        display: inline-block;
        font-size: 20rpx;
        line-height: 32rpx;
        padding: 0 8rpx;
        height: 32rpx;
        color: #fff;
        margin-top: 8rpx;
        background: linear-gradient(90deg, #38acff 0%, #387bff 100%);
        border-radius: 28rpx;
      }
    }
  }
  .info-btn {
    font-size: 24rpx;
    font-weight: 500;
    color: #3775f2;
    line-height: 40rpx;
  }
}
.seize {
  height: 16rpx;
  width: 100%;
  background: #f5f6fa;
}
.goods-info {
  background: #fff;
  padding-bottom: 16rpx;
  .swiper {
    width: 100%;
    height: 1000rpx;
    .img-box {
      width: 100%;
      height: 100%;
    }
  }
  .info-des {
    padding: 24rpx;
    font-size: 28rpx;
    color: #2b303b;
    line-height: 32rpx;
  }
  .info-text {
    padding: 0 24rpx;
    font-size: 28rpx;
    margin-bottom: 8rpx;
    color: #7f8798;
  }
  .tip {
    padding: 0 24rpx;
    font-size: 24rpx;
    color: #ff8345;
    margin-top: 8rpx;
  }
}
.link,
.secure {
  padding: 24rpx;
  background: #fff;
  &-title {
    display: flex;
    justify-content: space-between;
    width: 100%;
    text {
      font-size: 24rpx;
      color: #7f8798;
      &:nth-child(1) {
        font-size: 32rpx;
        font-weight: 500;
        color: #2b303b;
      }
    }
  }

  .tip {
    font-size: 24rpx;
    color: #ff8345;
    margin-top: 8rpx;
  }
}
.secure-box {
  margin-top: 24rpx;
  padding: 24rpx;
  background: #fff0f0;
  font-size: 28rpx;
  color: #2b303b;
  line-height: 48rpx;
}
.good-opt {
  padding: 16rpx 24rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  .good-icon {
    display: flex;
    justify-content: space-between;
    width: 224rpx;
    .icon-list {
      width: 48rpx;
      padding: 0;
      border-radius: 0;
      background-color: none;
      padding-top: 48rpx;
      color: #2b303b;
      font-size: 20rpx;
      text-align: center;
      line-height: 32rpx;
      margin: 0;
      border: 0;
      &:nth-child(1) {
        background: url('https://images.tongzhuangkc.com/tz/shouye1.png') no-repeat top center;
        background-size: 48rpx 48rpx;
      }
      &:nth-child(3) {
        background: url('https://images.tongzhuangkc.com/tz/fabu2.png') no-repeat top center;
        background-size: 48rpx 48rpx;
        &::after {
          display: none;
        }
      }
      &:nth-child(2) {
        background: url('https://images.tongzhuangkc.com/tz/jubao.png') no-repeat top center;
        background-size: 48rpx 48rpx;
      }
    }
  }
  .good-btn {
    display: flex;
    .btn-list {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 176rpx;
      height: 80rpx;
      font-size: 28rpx;
      color: #fff;
      background: linear-gradient(270deg, #5cb571 0%, #7ed477 100%);
      box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(96, 185, 114, 0.4);
      border-radius: 40rpx;
      &:nth-child(2) {
        margin-left: 16rpx;
        background: linear-gradient(90deg, #38acff 0%, #387bff 100%);
        box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(56, 122, 255, 0.4);
      }
    }
  }
}
.wx-sucess,
.report-box {
  width: 526rpx;
  padding: 64rpx 48rpx 48rpx;
  border-radius: 24rpx;
  background: #fff;
  text-align: center;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .img-box {
    width: 128rpx;
    height: 128rpx;
    margin-bottom: 16rpx;
  }
  .wx-title {
    height: 52rpx;
    font-size: 36rpx;
    font-weight: 600;
    color: #140f08;
    line-height: 52rpx;
  }
  .wx-des {
    font-size: 28rpx;
    color: #2b303b;
    line-height: 33rpx;
    margin: 16rpx 0 48rpx;
    text {
      color: #e94148;
    }
  }
  .wx-opt {
    width: 526rpx;
    height: 84rpx;
    background: linear-gradient(90deg, #38acff 0%, #387bff 100%);
    border-radius: 40rpx;
    font-size: 32rpx;
    font-weight: 600;
    color: #fff;
    line-height: 84rpx;
  }
}
.report-box {
  .uni-data-checklist .checklist-group .checklist-box {
    margin-right: 46rpx !important;
  }
  .uni-forms-item {
    margin-bottom: 0;
    .uni-forms-item__content {
      input {
        text-align: left;
        height: 144rpx;
      }
    }
  }
  .report-opt {
    width: 100%;
    display: flex;
    margin: 48rpx -12rpx 0;
    .opt-btn {
      width: 251rpx;
      height: 84rpx;
      background: #edf3ff;
      border-radius: 40rpx;
      font-size: 32rpx;
      text-align: center;
      margin: 0 12rpx;
      color: #3775f2;
      line-height: 84rpx;
      &:nth-child(2) {
        color: #fff;
        background: linear-gradient(90deg, #38acff 0%, #387bff 100%);
      }
    }
  }
}
.shop-box {
  padding: 24rpx 24rpx 0;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  width: calc(100% - 48rpx);
  margin: 0 -12rpx;
  .shop-list {
    width: 153rpx;
    margin: 0 12rpx;
    .img-box {
      width: 153rpx;
      height: 153rpx;
    }
    .shop-name {
      text-align: center;
      font-size: 24rpx;
      margin: 16rpx 0 24rpx;
      line-height: 40rpx;
      @include text-ellipsis(1);
    }
  }
}
</style>
